import React, {
    Component
} from 'react';
import GridTable from '../../components/display/gridTable';
import {
    Button,
    Input,
    Select,
    Row,
    Col,
    Tooltip,
    message,
    Spin
} from 'antd';
import ScModal from '../../components/feedback/scModal';
import {
    getUserInfo,
    getUserIntergration,
    getUserCarbonInfo,
    accountDetail,
    starCoinTransfer,
    companyInfo,
    companyInitPwd,
    findSaasUserInfoList
} from '../../fetch/fetchApi';
import PropsType from "prop-types";
import $ from 'jquery';
const Option = Select.Option;


class UserDetail extends Component {
    constructor(props) {
        super(props);
        this.props = props;
        this.state = {
            gridData: null,
            userData: null,
            loadingmes: '查询',
            loading: !1,
            userLoading: !1,
            spinLoading: !1,
            companyInfo: null,
            cityFlag: !1,
            pagination1: {
                total: 0
            },
            pagination2: {
                total: 0
            },
            pagination3: {
                total: 0
            }
        };
        this.init();
    }

    init() {
        // 测试账号account: '15061826550'
        this.query = {};
        this.modalQuery = {
            page: '1',
            pagecount: '10'
        };
        this.modalParams = {};
        this.userStatus = {
            '0': '未启用',
            '1': '启用',
            '2': '待审核'
        };
        this.discountType = {
            '0': '服务费按比例折扣',
            '1': '服务费固定值',
            '2': '总费用固定值',
            '3': '服务费按电费固定比例'
        };
        this.currentYear = new Date().getFullYear();
        this.setState({
            currentYear: this.currentYear
        });
        this.selectArrDom = [];
        for (let optionYear = 2015, end = this.currentYear; optionYear <= end; optionYear++) {
            this.selectArrDom.push(<Option key={optionYear} value={optionYear}>{optionYear}</Option>);
        };
        this.selectTypeJson = {
            "-1": "全部",
            "0": "消费",
            "1": "充值",
            "9": "线下退款"
        };
    }

    combineOptions(selectJson) {
        let options = [];
        for (let i in selectJson) {
            options.push(<Option key={i} value={i}>{selectJson[i]}</Option>);
        }
        return options;
    }

    // 提交查询
    queryChargeInfo() {
        if (!this.query.account) {
            message.error("请输入手机号！");
            return;
        }
        $(".saas").remove();
        this.getUserInfo().then((data) => {
            this.setState({
                userLoading: !1,
                userData: data
            });
        });

        findSaasUserInfoList(this.query).then((data) => {
            if (data.data.code == "200") {
                const saasArr = data.data.data;
                let saasArrDom = "";
                if (saasArr && saasArr.length > 0) {
                    for (let saas of saasArr) {
                        saasArrDom = saasArrDom + `<li class='saas'><strong>SAAS账户：<span>${saas.amount}</span></strong></li><li class='saas'><strong>所属企业：<span>${saas.companyName}</span></strong></li>`;
                    }
                    $("#company").after(saasArrDom);
                }
            }
        }).catch((ex) => {
            console.log(ex);
        })

    }

    // 注入账号信息参数
    telNumInputHandler(e) {
        this.query['account'] = e.target.value.toString();
    }

    // 取消弹窗
    cancel() {
        this.setState({
            modalVisible: !1,
            confirmLoading: !1,
            currentYear: this.currentYear
        });
    }

    // 打开星币转移panel （modal）
    showExchangeCoin(account) {
        this.modalParams = {};
        this.modalParams['fromAccount'] = account;
        this.setState({
            width: 520,
            modalTitle: '星币转移',
            modalName: 'exchangecoin',
            toAccount: ''
        }, () => {
            this.setState({
                modalVisible: !0
            });
        });
    }

    // 打开账户详情列表（modal）
    showAccountInfo(id) {
        this.modalQuery = {
            page: 1,
            pagecount: 10
        };
        this.modalQuery['year'] = this.currentYear;
        this.tableColumns = [{
            title: '业务订单号',
            dataIndex: 'logId',
            key: 'logId',
			className: 'column-nowrap',
        }, {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
			className: 'column-nowrap',
            render: (text, record) => (
                <div>
                    {this.selectTypeJson[text] || "未知"}
                  </div>)
        }, {
            title: '金额',
            dataIndex: 'amountNew',
            key: 'amountNew',
			className: 'column-nowrap',
            render: (text, record) => (
                <div>
            {text} 元
          </div>)
        }, {
            title: '描述',
            dataIndex: 'info',
            key: 'info',
            className: 'column-nowrap',
            render: (text, record) => (
                <Tooltip placement="topLeft" title={text}>
            {text}
          </Tooltip>)
        }, {
            title: '时间',
            dataIndex: 'createTime',
            key: 'createTime',
			className: 'column-nowrap',
        }, {
            title: '账户类型',
            dataIndex: 'accountType',
            key: 'accountType',
			className: 'column-nowrap',
            render: (text, record) => (
                <div>
            {text === 0 ? '个人账户' : '企业账户'}
          </div>)
        }, {
            title: '当前余额',
            dataIndex: 'userAmount',
            key: 'userAmount',
			className: 'column-nowrap',
            render: (text, record) => (
                <div>
            {text || record.companyAmount } 元
          </div>)
        }];
        this.setState({
            width: 800,
            modalVisible: !0,
            modalTitle: '账户明细',
            modalName: 'accountlist',
            currentYear: this.currentYear,
            gridData: null
        }, () => {
            this.queryAccountInfo(id);
        });
    }

    // 打开碳账户列表（modal）
    showCarbonInfo(id) {
        this.modalQuery = {
            'year': this.currentYear,
            page: 1,
            pagecount: 10
        };
        this.tableColumns = [{
            title: '碳资产',
            dataIndex: 'changeWeight',
            key: 'changeWeight',
			className: 'column-nowrap',
        }, {
            title: '描述',
            dataIndex: 'changeTypeInfo',
            key: 'changeTypeInfo',
            className: 'column-nowrap',
            render: (text, record) => (
                <Tooltip placement="topLeft" title={text} >
            {text}
          </Tooltip>)
        }, {
            title: '时间',
            dataIndex: 'createTime',
            key: 'createTime',
            className: 'column-nowrap',
            render: (text, record) => (
                <Tooltip placement="topLeft" title={text}>
            {text}
          </Tooltip>)
        }];
        this.setState({
            width: 800,
            modalVisible: !0,
            modalTitle: '碳积分列表',
            modalName: 'carbonlist',
            currentYear: this.currentYear,
            gridData: null
        }, () => {
            this.queryCarbonInfo(id);
        });
    }

    // 打开用户积分列表（modal）
    showScoreDetail(id, account) {
        this.modalQuery = {
            'year': this.currentYear,
            page: 1,
            pagecount: 10
        };
        this.tableColumns = [{
            title: '积分',
            dataIndex: 'integral',
            key: 'integral',
			className: 'column-nowrap',
        }, {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            className: 'column-nowrap',
            render: (text, record) => (
                <Tooltip placement="topLeft" title={text}>
            {text}
          </Tooltip>)
        }, {
            title: '时间',
            dataIndex: 'createTime',
            key: 'createTime',
            className: 'column-nowrap',
            render: (text, record) => (
                <Tooltip placement="topLeft" title={text}>
            {text}
          </Tooltip>)
        }];
        this.setState({
            width: 800,
            modalVisible: !0,
            modalTitle: '积分列表',
            modalName: 'scorelist',
            currentYear: this.currentYear,
            gridData: null
        }, () => {
            this.queryScoreList(id, account);
        });
    }

    // 打开企业详情 (modal)
    showCompanyDetail(userid) {
        this.modalQuery = {};
        this.modalQuery['userId'] = userid;
        this.setState({
            width: 620,
            modalTitle: '企业详情',
            modalName: 'companydetail',
        }, () => {
            this.setState({
                modalVisible: !0,
                spinLoading: !0
            });
            this.getCompanyInfo();
        });
    }

    // fetch 积分列表数据
    async getUserIntergration(params) {
        this.setState({
            loading: !0
        });
        try {
            const resData = await getUserIntergration(params);
            if (resData.data.code === '200') {
                const pagination = {
                    total: resData.data.pageLimit.totalCount,
                    onShowSizeChange: (current) => {
                        this.turnPage1(current)
                    },
                    onChange: (current) => {
                        this.turnPage1(current)
                    }
                }
                this.setState({
                    pagination1: pagination
                });
                return resData.data.data;
            }
        } catch (e) {
            console.log(e);
        }
    }

    // fetch 用户信息
    async getUserInfo() {
        this.setState({
            userLoading: !0
        });
        try {
            const resData = await getUserInfo(this.query);
            if (resData.data.code === '200') {
                const result = resData.data.data;
                result['status'] = this.userStatus[result['status']];
                result['companyPayType'] = result['companyPayType'] === '0' ? '分配资金' : `共享余额(金额:${result['limitAmountInfo']}, 时段${result['limitTimeInfo']})`;
                return result;
            }
        } catch (e) {
            console.log(e);
        }
    }

    // fetch 用户碳积分信息
    async getUserCarbonInfo(query) {
        this.setState({
            loading: !0
        });
        try {
            const resData = await getUserCarbonInfo(query);
            if (resData.data.code === '200') {
                const pagination = {
                    total: resData.data.pageLimit.totalCount,
                    onShowSizeChange: (current) => {
                        this.turnPage2(current)
                    },
                    onChange: (current) => {
                        this.turnPage2(current)
                    }
                }
                this.setState({
                    pagination2: pagination
                });
                return resData.data.data;
            }
        } catch (e) {
            console.log(e);
        }
    }

    // fetch 账户明细信息
    async accountDetail(query) {
        this.setState({
            loading: !0
        });
        try {
            const resData = await accountDetail(query);
            if (resData.data.code === '200') {
                const pagination = {
                    total: resData.data.pageLimit.totalCount,
                    onShowSizeChange: (current) => {
                        this.turnPage3(current)
                    },
                    onChange: (current) => {
                        this.turnPage3(current)
                    }
                }
                this.setState({
                    pagination3: pagination
                });
                return resData.data.data;
            }
        } catch (e) {
            console.log(e);
        }
    }

    // submit 星币转移
    async starCoinTransfer(params) {
        this.setState({
            loading: !0
        });
        try {
            const resData = await starCoinTransfer(params);
            if (resData.data.code === '200') {
                message.success('转移成功！', 1);
                this.cancel();
                return resData.data.data;
            }
        } catch (e) {
            console.log(e);
        }
    }

    // 获取企业详情
    async getCompanyInfo() {
        try {
            const resData = await companyInfo(this.modalQuery);
            if (resData.data.code === '200') {
                const result = resData.data.data;
                let ids = '';
                for (const r of result.discountRangeList) {
                    r.type === 1 && (ids += `${r.rangeId},`);
                    r.type === 0 && this.setState({
                        cityFlag: !0
                    });
                }
                ids = ids.substr(0, ids.length - 1);
                result.ids = ids;
                this.setState({
                    companyInfo: result,
                    spinLoading: !1
                });
            }
        } catch (e) {
            console.log(e);
        }
    }

    // 查询积分列表
    queryScoreList(id, account) {
        this.modalQuery['userId'] = id;
        this.modalQuery['account'] = account;
        this.modalQuery.page = '1';
        this.state.pagination1.current = 1;
        this.getUserIntergrationCb();
    }

    getUserIntergrationCb() {
        this.getUserIntergration(this.modalQuery).then((data) => {
            this.setState({
                loading: !1,
                gridData: data
            });
        });
    }

    // 查询碳积分信息
    queryCarbonInfo(id) {
        this.modalQuery['userId'] = id;
        this.modalQuery.page = '1';
        this.state.pagination2.current = 1;
        this.getUserCarbonInfoCb();
    }

    getUserCarbonInfoCb() {
        this.getUserCarbonInfo(this.modalQuery).then((data) => {
            this.setState({
                loading: !1,
                gridData: data
            });
        });
    }

    // 查询账户明细
    queryAccountInfo(id) {
        this.modalQuery['userId'] = id;
        this.modalQuery.page = '1';
        this.state.pagination3.current = 1;
        this.accountDetailCb();
    }

    turnPage1(current) {
        this.modalQuery['page'] = current.toString();
        this.getUserIntergrationCb();
    }

    turnPage2(current) {
        this.modalQuery['page'] = current.toString();
        this.getUserCarbonInfoCb();
    }

    turnPage3(current) {
        this.modalQuery['page'] = current.toString();
        this.accountDetailCb();
    }

    accountDetailCb() {
        this.accountDetail(this.modalQuery).then((data) => {
            this.setState({
                loading: !1,
                gridData: data
            });
        });
    }

    // 星币转移提交
    subExchangeIcon() {
        this.starCoinTransfer(this.modalParams).then(() => {
            this.setState({
                loading: !1
            });
        });
    }

    // 注入年份查询参数
    yearInputHandler(y) {
        this.modalQuery['year'] = y;
        this.setState({
            currentYear: y
        });
    }

    // 注入转入账户参数
    toAccountInputHandler(e) {
        this.modalParams['toAccount'] = e.target.value;
        this.setState({
            'toAccount': e.target.value
        });
    }

    // 打开tab
    openTab(param, e) {
        this.props.onAdd.bind(window.LayoutTab)(e, param);
        this.cancel();
    }

    // 重置密码
    async resetPw(id) {
        try {
            const resData = await companyInitPwd({
                id
            });
            if (resData.data.code === '200') {
                message.success(`重置密码成功!密码已重置,已通过短信通知用户手机号码: ${this.state.userData.account}`, 2);
            } else {
                message.error('重置密码失败！', 1);
            }
        } catch (e) {
            console.log(e);
        }
    }

    formatCarbonEmissionReduction(val) {
        let unit = ["g", "kg", "t"];
        let returnVal = val;
        let i = 0;
        for (; i < unit.length; i++) {
            if (returnVal < 1000) {
                break;
            }
            if (i != 2) {
                returnVal = (returnVal / 1000).toFixed(2);
            }
        }
        if (i == 3) {
            i = i - 1;
        }
        let returnArray = [returnVal, unit[i]];
        return returnArray;
    }

    typeSelectorChangeHandle = (e) => {
        if (e === "-1") {
            this.modalQuery['type'] = null;
        } else {
            this.modalQuery['type'] = e;
        }

    }

    render() {
        const Content = <div className="sc-page-content">
      <div className="page-toolbar">
        <Row gutter={8}>
          <Col lg={8} xl={4}>
            <Input placeholder="手机号精确查询" onChange={this.telNumInputHandler.bind(this)}/>
          </Col>
          <div className={'button-inlineBlock'}>
            <Button type="primary" onClick={this.queryChargeInfo.bind(this)} loading={this.state.userLoading}>{this.state.loadingmes}</Button>
          </div>
        </Row>
      </div>
      <div className="page-panel">
        <Row gutter={8}>
          <Col lg={8} xl={10}>
            <div className={'page-info-item'}>
              <h3><span>基本信息</span></h3>
              <ul>
                <li><strong>用户账号:</strong>{this.state.userData ? <span>{this.state.userData.account}</span> : '--'}</li>
                <li><strong>账户状态:</strong>{this.state.userData ? <span>{this.state.userData.status}</span> : '--'}</li>
                <li><strong>注册时间:</strong>{this.state.userData ? <span>{this.state.userData.createTime}</span> : '--'}</li>
                <li><strong>归属地:</strong>{this.state.userData ? <span>{this.state.userData.cityStr}</span> : '--'}</li>
                <li><strong>生日:</strong>{this.state.userData ? <span>{this.state.userData.birthday && this.state.userData.birthday.split(' ')[0]}</span> : '--'}</li>
                <li><strong>用户等级:</strong>{this.state.userData ? <span>V{this.state.userData.level}</span> : '--'}</li>
                <li><strong>等级分值:</strong>{this.state.userData ? <span>{this.state.userData.validIntegral} (上期分值：{this.state.userData.previousIntegral})</span> : '--'}</li>
                <li><strong>积分余额:</strong>{this.state.userData ? <div><span>{this.state.userData.validIntegral}</span><a  onClick={() => this.showScoreDetail(this.state.userData.id, this.state.userData.account)}>积分明细 ></a></div> : '--'}</li>
                <li><strong>碳 余  额:</strong>{this.state.userData ? <div><span>{this.formatCarbonEmissionReduction(this.state.userData.validEmissionReduction)}</span><span>(累计碳资产：{this.formatCarbonEmissionReduction(this.state.userData.carbonEmissionReduction)})</span>
                  <a onClick={() => this.showCarbonInfo(this.state.userData.id)}>碳账户明细 ></a></div> : '--'}</li>
              </ul>
            </div>
          </Col>
          <Col lg={8} xl={14}>
            <div className={'page-info-item'}>
              <h3><span>账户信息</span></h3>
              <ul>
                <li><strong>个人账户:</strong>{this.state.userData ?
            <div>
                    <span>{this.state.userData.amount}</span>
                    <a  onClick={() => this.showAccountInfo(this.state.userData.id)}>账户明细 > &nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a  onClick={() => this.showExchangeCoin(this.state.userData.account)}>星币转移 ></a>
                  </div> : '--'}</li>
                <li><strong>抵用券:</strong>{this.state.userData ?
            <div>
                    <span>{this.state.userData.voucherNum}</span>
                    <a  onClick={() => this.openTab({
                'keyId': this.state.userData.id,
                'userId': this.state.userData.id
            }, {
                'key': 'voucher',
                titleText: '抵用券'
            })}>抵用券明细 ></a>
                  </div>
            : '--'}</li>
                <li><strong>一号多充:</strong>{this.state.userData ? <span>{this.state.userData.chargeNum}</span> : '--'}</li>
                <li><strong>企业账户:</strong>{this.state.userData ? <span>{this.state.userData.companyAmount}</span> : '--'}</li>
                <li><strong>账户类型:</strong>{this.state.userData ? <span>{this.state.userData.companyPayType}</span> : '--'}</li>
                <li id="company"><strong>所属企业:</strong>{this.state.userData && this.state.userData.companyName ?
            <div>
                        <span>{this.state.userData.companyName}</span>
                        <a  onClick={() => this.showCompanyDetail(this.state.userData.id)}>查看企业 ></a>
                    </div>
            : '--'}
                </li>
                <li><strong>桩主身份:</strong>{this.state.userData ?
            <div>
                    <span>{this.state.userData.isStubOwner === '1' ? '是' : '否'}</span>
                    {this.state.userData.isStubOwner === '1' && <a  onClick={() => this.openTab({
                'keyId': this.state.userData.account,
                'account': this.state.userData.account
            }, {
                'key': '010203',
                titleText: '私桩列表'
            })}>查看私桩 ></a>}
                  </div>
            : '--'}</li>
                {this.state.userData && <li>
                  <Button type={"primary"} className="largeBtn" onClick={() => this.openTab({
            'keyId': `orderlist${this.state.userData.id}1`,
            'appkeyType': 1,
            'userId': this.state.userData.id
        }, {
            'key': 'orderlist',
            titleText: 'APP订单'
        })}>APP订单</Button>
                  <Button type={"primary"} className="largeBtn" onClick={() => this.openTab({
            'keyId': `appletOrderList${this.state.userData.id}2`,
            'appkeyType': 2,
            'userId': this.state.userData.id
        }, {
            'key': 'appletOrderList',
            titleText: '小程序订单'
        })}>小程序订单</Button>
                  <Button type={"primary"} className="largeBtn" onClick={() => this.openTab({
            'keyId': `applyinvoce${this.state.userData.account}`,
            'userId': this.state.userData.id,
            'account': this.state.userData.account
        }, {
            'key': 'applyinvoice',
            titleText: '申请开票'
        })}>申请开票</Button>
                  <Button type={"primary"} className="largeBtn" onClick={() => this.openTab({
            'keyId': `invoicelist${this.state.userData.account}`,
            'userId': this.state.userData.id
        }, {
            'key': 'invoicelist',
            titleText: '开票记录'
        })}>开票记录</Button>
                </li>}
              </ul>
            </div>
          </Col>
        </Row>
        { /* 构建积分列表 */ }
        {this.state.modalName === 'scorelist' &&
        <ScModal
        width={this.state.width}
        modalVisible={this.state.modalVisible}
        modalTitle={this.state.modalTitle}
        modalContent={
        <div className="sc-modal-scroll">
            <div className="modal-list">
              <Row gutter={8}>
                <Col lg={8} xl={4}>
                  <Select onChange={this.yearInputHandler.bind(this)} defaultValue={this.currentYear} value={this.state.currentYear} className="modal-select" placeholder="选择年份">
                    {this.selectArrDom}
                  </Select>
                </Col>
                <Col lg={8} xl={2} className="whole-fill">
                  <Button type="primary" onClick={() => this.queryScoreList(this.modalQuery.userId, this.modalQuery.account)} loading={this.state.loading}>{this.state.loadingmes}</Button>
                </Col>
              </Row>
            </div>
            <GridTable postyle="table-center" data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination1}/>
          </div>
    }
    footer = {
        null
    }
    cancel = {
        this.cancel.bind(this)
    }
    />} { /* 构建碳账户列表 */ } {
        this.state.modalName === 'carbonlist' &&
            <ScModal
        width={this.state.width}
        modalVisible={this.state.modalVisible}
        modalTitle={this.state.modalTitle}
        modalContent={
        <div className="sc-modal-scroll">
              <div className="modal-list">
                <Row gutter={8}>
                  <Col lg={8} xl={4}>
                    <Select onChange={this.yearInputHandler.bind(this)} value={this.state.currentYear}  defaultValue={this.currentYear} className="modal-select" placeholder="选择年份">
                      {this.selectArrDom}
                    </Select>
                  </Col>
                  <Col lg={8} xl={2} className="whole-fill">
                    <Button type="primary" onClick={() => this.queryCarbonInfo(this.modalQuery.userId)} loading={this.state.loading}>{this.state.loadingmes}</Button>
                  </Col>
                </Row>
              </div>
              <GridTable postyle="table-center" data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination2}/>
            </div>
        }
        footer={null}
        cancel={this.cancel.bind(this)}
        />}
        { /* 构建账户明细列表 */ }
        {this.state.modalName === 'accountlist' &&
        <ScModal
        width={this.state.width}
        modalVisible={this.state.modalVisible}
        modalTitle={this.state.modalTitle}
        modalContent={
        <div className="sc-modal-scroll">
              <div className="modal-list">
                <Row gutter={8}>
                  <Col lg={8} xl={4}>
                    <Select onChange={this.yearInputHandler.bind(this)} value={this.state.currentYear}  defaultValue={this.currentYear} className="modal-select" placeholder="选择年份">
                      {this.selectArrDom}
                    </Select>
                  </Col>
                  <Col lg={8} xl={4}>
                    <Select defaultValue="-1" onChange={this.typeSelectorChangeHandle} className="modal-select">
                      {this.combineOptions(this.selectTypeJson)}
                    </Select>
                  </Col>
                  <Col lg={8} xl={2} className="whole-fill">
                    <Button type="primary" onClick={() => this.queryAccountInfo(this.modalQuery.userId)} loading={this.state.loading}>{this.state.loadingmes}</Button>
                  </Col>
                </Row>
              </div>
              <GridTable postyle="table-center" data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination3}/>
            </div>
        }
        footer={null}
        cancel={this.cancel.bind(this)}
        />}
        { /* 构建星币转移面板 */ }
        {this.state.modalName === 'exchangecoin' &&
        <ScModal
        width={this.state.width}
        modalVisible={this.state.modalVisible}
        modalTitle={this.state.modalTitle}
        modalContent={
        <div className="sc-modal-scroll">
              <div className="modal-list">
                <Row gutter={8}>
                  <Col xl={4}>
                    <label className={'inlinelabel'}>转出账号:</label>
                  </Col>
                  <Col xl={6} className="whole-fill">
                    <Input type={'text'} value={this.state.userData && this.state.userData.account} disabled={true}/>
                  </Col>
                </Row>
              </div>
              <div className="modal-list">
                <Row gutter={8}>
                  <Col xl={4}>
                    <label className={'inlinelabel'}>星币余额:</label>
                  </Col>
                  <Col xl={6} className="whole-fill">
                    <label className={'inlinelabel'}>{this.state.userData && this.state.userData.amount}</label>
                  </Col>
                </Row>
              </div>
              <div className="modal-list">
                <Row gutter={8}>
                  <Col xl={4}>
                    <label className={'inlinelabel'}>收款账号:</label>
                  </Col>
                  <Col xl={6} className="whole-fill">
                    <Input type={'text'} value={this.state.toAccount} onChange={this.toAccountInputHandler.bind(this)}/>
                  </Col>
                </Row>
              </div>
            </div>
        }
        loading={this.state.loading}
        handle={this.subExchangeIcon.bind(this)}
        cancel={this.cancel.bind(this)}
        />}
        { /* 构建企业详情面板 */ }
        {this.state.modalName === 'companydetail' &&
        <ScModal
        width={this.state.width}
        modalVisible={this.state.modalVisible}
        modalTitle={this.state.modalTitle}
        modalContent={<div className="sc-modal-scroll">
            {this.state.spinLoading && <Spin className={'loadingMiddle'}/>}
            {this.state.companyInfo && <div className="modal-list">
              <div className={"modal-flex"}>
                <div className="modal-flex-1">
                  <h3 className={'flex-title'}><span>企业信息</span></h3>
                  <ul>
                    <li>
                      <strong>企业账号:</strong>
                      <span>{this.state.companyInfo.account}</span>
                      <Button type={'primary'} className={'modal-sm-btn'} onClick={() => this.resetPw(this.state.companyInfo.id)}>重置密码</Button>
                    </li>
                    <li>
                      <strong>企业名称:</strong>
                      <span>{this.state.companyInfo.name}</span>
                    </li>
                    <li>
                      <strong>申请时间:</strong>
                      <span>{this.state.companyInfo.createTime}</span>
                    </li>
                    <li>
                      <strong>通过时间:</strong>
                      <span>{this.state.companyInfo.approveTime}</span>
                    </li>
                    <li>
                      <strong>账户余额:</strong>
                      <span>{this.state.companyInfo.amount}</span>
                    </li>
                    {this.state.companyInfo && <li>
                      <strong>允许透支:</strong>
                      <span>{this.state.companyInfo.overdraft > 0 ? '允许' : '不允许'}</span>
                    </li>}
                  </ul>
                </div>
                <div className={"modal-flex-1"}>
                  <h3 className={'flex-title'}><span>折扣信息</span></h3>
                  <ul>
                    <li>
                      <strong>折扣范围:</strong>
                      <p>城市范围</p>
                      {this.state.cityFlag ?
            <Tooltip placement="topLeft" title={this.state.companyInfo.discountRangeList.map(data => (data.type === 0 && `${data.rangeName} 
`))}>
                        <span>{this.state.companyInfo.discountRangeList.map(data => (data.type === 0 && `${data.rangeName} 
`))}</span>
                      </Tooltip> : <span>--</span>}
                    </li>
                    <li>
                      <strong></strong>
                      <p>电站范围 </p>
                      <Button type={'primary'} className={'modal-sm-btn'} onClick={() => this.openTab({
            'keyId': this.state.companyInfo.ids,
            'stubGroupIds': this.state.companyInfo.ids
        }, {
            'key': 'pslist',
            titleText: '电站查询'
        })}>查看电站</Button>
                    </li>
                    {this.state.companyInfo && <li>
                      <strong>折扣类型:</strong>
                      <span>{this.discountType[this.state.companyInfo.discountMode]}</span>
                    </li>}
                    {this.state.companyInfo && <li>
                      <strong>折  扣  值:</strong>
                      <span>{this.state.companyInfo.discountVal}</span>
                    </li>}
                    {this.state.companyInfo && <li>
                      <strong>有效时间:</strong>
                      <Tooltip placement="topLeft" title={`${this.state.companyInfo.startTime} - ${this.state.companyInfo.endTime}`}>
                        <span>{`${this.state.companyInfo.startTime} - ${this.state.companyInfo.endTime}`}</span>
                      </Tooltip>
                    </li>}
                    { /*{this.state.companyInfo && <li>*/ }
                      { /*<strong>配置时间</strong>*/ }
                      { /*<span>{this.state.companyInfo.accountMask}</span>*/ }
                    { /*</li>}*/ }
                  </ul>
                </div>
              </div>
            </div>}
          </div>}
        loading={this.state.loading}
        footer={null}
        cancel={this.cancel.bind(this)}
        />}
      </div>
    </div>;
        return Content;
    }
}

export default UserDetail;

UserDetail.propTypes = {
    onAdd: PropsType.func
}